<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <!-- 
        JS事件中
            单一功能事件：只由一个特性触发的的事件 onmousedown onmouseup ……
            组合功能事件：由一个以上的特性触发的事件 click【onmousedown onmouseup】
    -->
    <div id="app">
        <pre v-pre class="note" >
        Vue 事件的键盘(键盘、遥控器、手柄……)修饰符==>单一功能事件
            + 普通按键修饰符 == 连写为 或者关系
            + 系统按键修饰符 == 连写 并且关系
                ==> 精确修饰符(2.5+)：.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

        Vue对特殊名称的键盘按键提供内置别名用于修饰符定义操作
        </pre>
        <textarea cols="30" rows="10" placeholder="@keydown=" @keydown="printInfo($event)"></textarea>

        <h4>普通按键修饰符</h4>
        <textarea cols="30" rows="10" placeholder="@keydown.a=" @keydown.a="printInfo($event)"></textarea>
        <br><br>
        <textarea cols="30" rows="10" placeholder="@keydown.f2=" @keydown.f2="printInfo($event)"></textarea>
        <br><br>
        <!-- 浏览器对标签和属性不识别大小写,vue构建大小写事件修饰符绑定时可以使用连字符规则进行描述，也可以通过别名方式进行描述 -->
        <textarea cols="30" rows="10" placeholder="@keydown.arrow-up=" @keydown.arrow-up="printInfo($event)"></textarea>
        <textarea cols="30" rows="10" placeholder="@keydown.up=" @keydown.up="printInfo($event)"></textarea>
        <br><br>
        <textarea cols="30" rows="10" placeholder="@keydown.delete=" @keydown.delete="printInfo($event)"></textarea>
        <br><br>
        <textarea cols="30" rows="10" placeholder="@mousedown.middle" @mousedown="printInfo($event)" ></textarea>
        <br><br>
        <textarea cols="30" rows="10" placeholder="@keydown.a.b.c.d" @keydown.a.b.c.d="printInfo($event)" ></textarea>
        
        <h4>系统按键修饰符【键盘功能按键-JS事件源对象中具有独立描述属性的按键-ctrl-alt-shift-mate-……】</h4>
        <h4>常规修饰用法-等效于普通按键修饰符</h4>
        <textarea cols="30" rows="10" placeholder="@keydown.ctrl" @keydown.ctrl="printInfo($event)" ></textarea>
        <h4>组合修饰用法</h4>
        <h5>1、系统按键修饰符组合-两个系统按键被同时激活</h5>
        <textarea cols="30" rows="10" placeholder="@keydown.ctrl.alt" @keydown.ctrl.alt="printInfo($event)" ></textarea>
        <h5>2、系统按键修饰符和普通按键修饰符组合-系统按键和普通按键被同时激活</h5>
        <textarea cols="30" rows="10" placeholder="@keydown.ctrl.a" @keydown.ctrl.a="printInfo($event)" ></textarea>
        <h5>3、多系统按键修饰符和多普通按键修饰符组合</h5>
        <!-- 将多个系统按键(可多于限制)和每个普通按键完成 并且组合，通过或者进行连接 -->
        <textarea cols="30" rows="10" placeholder="@keydown.ctrl.alt.b.c" @keydown.ctrl.alt.b.c="printInfo($event)" ></textarea>
        <h5>4、多系统按键修饰符和多普通按键修饰符的精确组合</h5>
        <textarea cols="30" rows="10" placeholder="@keydown.ctrl.alt.b" @keydown.ctrl.alt.b.exact="printInfo($event)" ></textarea>

    </div>
    <script type="module">
        
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                   
                }
            },
            methods:{
                printInfo(e){
                    // if(e.key=="??"||e.key=="??"){} // 普通按键修饰符
                    console.log("event:",e)
                    console.log("键盘按键被操作:",e.target.value)
                }
            }
        }).mount("#app");
    </script>
</body>
</html>